<template>
  <div class="myAddress">
    <topNav :title="'管理'" :update="'新建'" @send="newAddress" @jump="jumpBuilt"/>
    <h4>我的地址管理</h4>
    <div class="addressList">
      <ul>
        <li v-for="(item, index) in adressList" :key="index" @click="jump(item)">
        <van-tag type="danger" v-show="item.default_set==1" class="default">默认</van-tag>
          <div class="left">
            <div class="top">
              <span class="name">{{ item.name }}</span>
              <span class="phone">{{ item.phone }}</span>
            </div>
            <p>{{ item.area_name }} {{ item.desc }} {{ item.area }}</p>
          </div>
          <div class="arrow"><img src="../../assets/my/rightarrow.png" alt="" /></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>

import { get } from "../../utils/request.js";
import { Toast } from "vant";
import { onBeforeMount, ref, reactive,onUnmounted ,toRefs,watch} from "vue";
import { useStore } from "vuex";
import { useRouter,useRoute } from "vue-router";
import { setSession,getSession } from "../../utils/index.js";
import  topNav  from "./components/topNav.vue";
const router=useRouter()
const route=useRoute()
const store=useStore()
const jump=(item)=>{
       if (item.default_set==1) {
        item.default_set=true
       }

    store.commit("address/setAddress",item)
    router.push('/updateAddress')
    store.commit("address/setransformData",1)
}
const newAddress=()=>{
   router.push('/modify')
}
const jumpBuilt=()=>{
   router.push('/builtAddress/0')
}

Toast.loading({
  message: "正在请求地址数据，请稍后",
  forbidClick: true,
  duration: 0,
});
let result;
let timer;
 const adressList = ref([]);

const getAddrenss = async () => {

  try {
    result = await get("/address");
    
  
  } catch (error) {
  timer = setTimeout(() => {
      Toast.clear();
      Toast.fail({
        message: "请求地址数据错误，请刷新本页面",
        forbidClick: true,
      });
      clearTimeout(timer);
    }, 3000);
  }
  if (result.status == 200) {
    let addressResult=result.data.result
    //adressList.value=result.data.result
      addressResult.forEach((ele,index) => {
        if (ele.default_set=='1') {
          let arr=ele
          addressResult.splice(index,1)
          addressResult.unshift(arr)
        }
      });
      adressList.value=addressResult
    Toast.clear(); 
  }
};
// onActivated(()=>{
//   console.log(123456789);
// })


watch(()=>route.path,(newPath,oldPath)=>{
       getAddrenss();
},{immediate:true})
// 用户退出页面时在生命周期内启用该函数
   
</script>

<style lang="scss" scoped>
.myAddress {
  width: 100%;
  height: 100vh;
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  background-color: #f1f1f1;

  h4 {
    margin: 0;
    font-weight: normal;
    font-size: 4vw;
    color: #333333;
    margin-top: 2vh;
    margin-left: 4vw;
  }
  .addressList {
    margin-top: 1.7vh;

    li {
      margin: 0 auto;
      margin-top: 2.3vh;
      width: 90.6vw;
      height: 15.5vh;
      background-color: white;
      padding: 16px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      align-items: center;
      position: relative;
      .default{
        position: absolute;
        top: 1vh;
      }
      .left {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .name,
        .phone {
          color: #999999;
          font-size: 3.7vw;
        }

        .phone {
          margin-left: 17vw;
        }
        p {
          color: #333333;
          margin: 0;
          font-size: 3.7vw;
          width: 80%;
          overflow: hidden;
          word-break: break-all;
        }
      }
      .arrow{
           width: 4vw;
        height: 3vh;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
